<template>
	<transition name="fade">
    <div class="message" :class="type" v-if="visible">
			<div :class="['wrap', 'bg-'+type]">
				<i class="iconfont">{{mapIcon[type]}}</i>
				<div class="content">{{content}}</div>
			</div>
    </div>
  </transition>
</template>

<script>
	export default {
    name: "message",
    data() {
      return {
        content: '',
        time: 2000,
        visible: false,
        type:'info',//'success','warning','error'
        hasClose:false,
				mapIcon:{
					'success':'\ue72d',
					'warning': '\ue73d',
					'info': '\ue71b',
					'danger': '\ue6f2'
				}
      }
    },
    mounted() {
      this.close()
    },
    methods: {
      close() {
        window.setTimeout(() =>{
          this.visible = false
        }, this.time);
      }
    }
  }
</script>

<style lang="scss" scoped>
	@import '../../../assets/css/base.scss';
	.message{
		position: fixed;
		z-index: 999;
		top: 20px;
		left: 0;
		pointer-events: none;
		width: 100%;
		display: flex;
		justify-content: center;
		.wrap{
			background: $info;
			color: #fff;
			padding: 0 2em;
			display: flex;
			align-items: center;
			border-radius: 5px;
			height: 34px;
		}
		.success{
			background: $success;
		}
		.danger{
			background: $danger;
		}
		.iconfont{
			margin-right: 5px;
			font-size: 18px;
		}
	}
	.fade-enter-active,.fade-leave-active{
		transition: all .2s;
	}
	.fade-enter, .fade-leave-to{
		top: -54px;
	}
</style>
